<template>
  <div>
    <van-sticky>
    <div class="demo-nav" style>
      <div class="demo-nav__title"></div>
      <span @click="shop()" class="demo-nav__back">
            <svg viewBox="0 0 1000 1000" @click="toBack">
              <path fill="#969799" fill-rule="evenodd" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z">
              </path>
            </svg>
          </span>
    </div>
  </van-sticky>


    <div class="center">
        <img src="@/assets/money.png" alt="">
        <span class="ktx">可提现金额</span>
        <span class="num"><b>￥{{this.tixian}}</b></span>
    </div>
    <div class="tx">
        <button @click="tixianjine">提现</button>
    </div>


    <van-popup v-model="show" style="width: 18rem;height: 8rem">

      <van-form ref="form" :model="form" >
        <van-field
          v-model="form.depositKetixian"
          name="提现余额"
          label="提现余额"
          placeholder="提现余额"
        />

        <div style="margin: 16px;">
          <van-button round block type="info" @click="submitForm">提交</van-button>
        </div>
      </van-form>

    </van-popup>

  </div>
</template>
<script>
  import { listDeposit,getDeposit,updateDeposit } from "@/api/customer/deposit";
  import { Dialog } from 'vant';
  import { Toast } from 'vant';
  export default {
  name: "Cash",
  data(){
    return{
      tixian:'',
      form:{},
      show: false,
    }
  },

    created() {
      const depositId = this.$route.query && this.$route.query.depositId;
      this.listDeposit();
    },

    methods: {

      tixianjine(){
        // Dialog.alert({
        //   title: '标题',
        //   message: '弹窗内容',
        //   theme: 'round-button',
        // })

        function beforeClose(action, done) {
          if (action === 'confirm') {
            Toast('请耐心等待,到款');
            setTimeout(done, 1000);
          } else {
            done();
          }
        }

        Dialog.confirm({
          title: '标题',
          message: '确定提现?',
          beforeClose,
        });
        // this.show = true;
      },

      // submitForm(){
      //   updateDeposit(this.form).then(res=>{
      //     Toast.success('提现成功,请耐心等待');
      //   this.show = false;
      //   })
      // },

      listDeposit() {
        listDeposit().then(res=>{
          this.listDep = res.data.data;
        this.tixian = res.data[0].depositKetixian;
      })
      },

      toBack(){
        this.$router.go(-1);//返回上一层
      },

    }



};
</script>
<style scoped>
.button-an {
  width: 22.2rem;
  top: 0.5rem;
  border-radius: 1rem;
  font-size: 1rem;
  /*padding: 0.4rem;*/
}
.demo-nav__back {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.demo-nav {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  height: 3.2rem;
  background-color: #fff;
}
.demo-nav__title {
  float: left;
  margin-right: 230px;
  font-size: 18px;
}
.div-ann {
  height: 3.8rem;
}
.center{
    width: 100vw;
    height: 100px;
    display: flex;
    flex-direction: column;
    margin-top: 100px;
}
.center img{
    width: 39px;
height: 39px;
margin: 0 auto;
background-color: rgba(253, 195, 2, 100);
}
.ktx{
    color: rgba(89, 89, 89, 100);
font-size: 16px;
margin-top: 10px;
text-align: center;
font-family: SourceHanSansSC-regular;
}
.num{
    margin-top: 10px;
color: rgba(64, 64, 64, 100);
font-size: 28px;

font-family: PingFangSC-bold;
}
.tx button{
    width: 190px;
height: 42px;
margin-top: 250px;
line-height: 20px;
border-radius: 10px;
color: #fff;
background-color: rgba(195, 155, 115, 100);
text-align: center;
border: 1px solid rgba(255, 255, 255, 100);
}

.demo-nav{
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  height: 3.2rem;
  background-color: #fff;
}
.demo-nav__title {
  font-weight: 450;
  font-size: 1rem;
  text-transform: capitalize;
}
.demo-nav__back {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
</style>
